<template>
	<view class="box">
		<view>
			<!-- 差价说明 -->
			<view class="desc red f24" v-if="is_chajia">因为该商品产生了差价，实际金额￥11.3，退款只退实际金额</view>
			<!--  -->
			<view class="type">
				<view class="title f32">售后类型</view>
				<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" activeColor="#22B591"
					iconSize="15">
					<u-radio :customStyle="{marginBottom: '8px',marginRight:'60rpx'}"
						v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>

			<u-checkbox-group v-model="ids" placement="column">
				<template v-for="orderlist in orderInfo.orderList">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in orderlist.orderProduct"
						:key="index"
						:label="item.cart_info.product.store_name + ((item.refund_num == 0 || item.is_barter != 0)?'  已申请售后':'')"
						:name="item.order_product_id" :disabled="item.refund_num == 0 || item.is_barter != 0">
					</u-checkbox>
				</template>
			</u-checkbox-group>

			<!-- 申请原因 -->
			<view class="why">
				<view class="title">申请原因</view>
				<textarea v-model="retreat.refund_message" placeholder="请描述详细问题" auto-height="true" maxlength="-1" />
			</view>
			<!-- 申请凭证 -->
			<view class="pz">
				<view class="title">申请凭证</view>
				<view class="upload flex">
					<view class="img" v-for="(item,index) in img_list" :key="index">
						<view class="img2 f-w">
							<image :src="item.path" mode="aspectFit"></image>
						</view>
						<view class="close f-w" @click="del(index)">
							<image src="https://jw.xzsw2021.com/static/client/icon_95@2x.png" mode=""></image>
						</view>
					</view>
					<view class="demo fh-ct" @click="upload" v-if="showAdd">
						<image src="https://jw.xzsw2021.com/static/client/icon_110@2x.png" mode=""></image>
						<view>上传图片</view>
					</view>
				</view>
			</view>
			<view class="pz">
				<view class="title">售后说明</view>
				<view style="word-break: break-all;flex-wrap: wrap;white-space:pre-wrap">
					{{orderInfo.config}}
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="mybtn">
			<view @click="submit">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		getGroupOrderDetailApi,
		refundApi
	} from '@/api/order.js'
	export default {
		data() {
			return {
				is_chajia: false, //是否差价
				// 基本案列数据
				radiolist1: [{
						name: '仅退款',
						disabled: false
					},
					{
						name: '退货退款',
						disabled: false
					},
					{
						name: '换货',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '仅退款',
				content: '',
				img_list: [], //
				length: 9, //允许上传图片数量
				showAdd: true, //是否显示上传按钮
				list: [], //
				e: {},
				orderInfo: {},
				ids: [],
				retreat: {
					ids: "",
					mark: '',
					num: '',
					refund_message: "", //退款理由
					refund_price: 0,
					refund_type: '', //1仅退款不退货，2退货退款，3换货      换货时refund_price无用
					type: 2,
					images: []
				}
			}
		},
		onLoad(e) {
			this.e = e
			this.OrderDetail()
		},
		methods: {
			OrderDetail() {
				getGroupOrderDetailApi(this.e.group_order_id).then(res => {
					this.orderInfo = res.data
				}).catch(err => {

				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			// // 上传
			upload() {
				this.$uploadImg(this.img_list, this.showAdd, this.length)
			},
			// 删除当前图片
			del(index) {
				this.img_list.splice(index, 1);
				if (this.img_list.length < this.length) {
					this.showAdd = true;
				}
				console.log('删除', index);
			},
			// 提交
			submit() {
				let This = this
				this.img_list.forEach(img => {
					this.retreat.images.push(img.path)
				})
				if (!this.retreat.refund_message.trim()) {
					this.$showToast('请描述详细问题');
					return false;
				}
				let refund_type = 0
				if (this.radiovalue1 == '仅退款') {
					refund_type = 1
				} else if (this.radiovalue1 == '退货退款') {
					refund_type = 2
				} else {
					refund_type = 3
				}
				this.retreat.refund_type = refund_type
				if (this.ids.length == 0) {
					this.$showToast('请选择申请售后商品');
					return;
				}
				let data = {}
				this.orderInfo.orderList.forEach(order => {
					order.orderProduct.forEach(product => {
						if (This.ids.indexOf(product.order_product_id) != -1) {
							if (typeof data[`order_id${order.order_id}`] == 'undefined') {
								data[`order_id${order.order_id}`] = {
									ids: [],
									refund_price: 0,
									order_id: 0
								}
							}
							data[`order_id${order.order_id}`].order_id = order.order_id
							data[`order_id${order.order_id}`].ids.push(product.order_product_id)
							data[`order_id${order.order_id}`].refund_price += Number(product.product_price)
						}
					})
				})
				let datakey = Object.keys(data)
				datakey.forEach(key => {
					this.retreat.ids = data[key].ids.join(',')
					this.retreat.mark = this.retreat.refund_message
					this.retreat.refund_price = data[key].refund_price
					refundApi(data[key].order_id, this.retreat).then(res => {
						This.$showToast(res.message);
						This.OrderDetail()
					
						setTimeout(function(){
							uni.navigateBack({
								
							}) 
						},1000)
					}).catch(err => {
						This.$showToast(err.message);
					})
				})
				this.ids = []




				// if(!this.content.trim()){
				// 	this.$showToast('请描述详细问题');
				// 	return false;
				// }
				// if(!this.img_list.length){
				// 	this.$showToast('请上传申请凭证');
				// 	return false;
				// }
				// let arr=[];
				// this.img_list.map(item=>{
				// 	arr.push(item.id);
				// })
				// arr=arr.join();
				// console.log(arr);
				// this.$showToast('提交成功');
				// uni.redirectTo({
				// 	url: '/pages/state/success/success?type=6'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 30rpx 180rpx;

		.red {
			color: #F83535;
		}

		.desc {
			padding: 28rpx 0 0;
		}

		.title {
			padding: 35rpx 0;
		}

		.type,
		.why {
			padding: 0 0 30rpx;
			border-bottom: 1rpx solid #eee;
		}

		.type {
			.title {
				padding: 35rpx 0 40rpx;
			}
		}

		textarea {
			margin: 0 auto;
			width: 690rpx;
			min-height: 260rpx;
			padding: 28rpx;
			background: #F4F4F4;
			border-radius: 8rpx;
			font-size: 26rpx;
			box-sizing: border-box;
		}

		.upload {
			flex-wrap: wrap;

			&>view {
				margin-bottom: 15rpx;
			}

			&>view:not(:nth-child(3n-2)) {
				margin-left: 45rpx;
			}

			.img {
				position: relative;
				flex-shrink: 0;
				width: 200rpx;
				height: 200rpx;
				background: #F8F8F8;

				.img2 {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}

				.close {
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 30rpx;
					z-index: 5;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.demo {
				justify-content: center;
				flex-shrink: 0;
				font-size: 24rpx;
				color: #999999;
				width: 200rpx;
				height: 200rpx;
				background: #F8F8F8;
				border-radius: 8rpx;

				image {
					margin-bottom: 10rpx;
					width: 39rpx;
					height: 34rpx;
				}
			}
		}
	}
</style>
